<template>
  <view class="review-progress">
    <view class="status-section">
      <text class="status-text">{{ statusText }}</text>
      <view v-if="showReviewButton" class="review-button" @click="openReviewForm">审核</view>
    </view>

    <view v-if="showForm" class="form-modal">
      <view class="form-content">
        <view class="form-item">
          <text>推广者名称</text>
          <input v-model="form.spreaderName" placeholder="请输入名称" />
        </view>
        <view class="form-item">
          <text>推广者Logo</text>
          <input v-model="form.spreaderLogo" placeholder="请输入Logo URL" />
        </view>
        <view class="form-item">
          <text>推广者介绍</text>
          <textarea v-model="form.spreaderIntr" placeholder="请输入介绍"></textarea>
        </view>
        <view class="form-item">
          <text>推广者粉丝数</text>
          <input v-model.number="form.spreaderFansNum" type="number" placeholder="请输入粉丝数" />
        </view>
        <view class="form-actions">
          <button @click="submitReview">提交</button>
          <button @click="closeReviewForm">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 0, // 0: 未提交, 1: 待审核, 2: 审核通过, 3: 审核失败
      form: {
        spreaderName: '',
        spreaderLogo: '',
        spreaderIntr: '',
        spreaderFansNum: 0
      },
      showForm: false
    }
  },
  computed: {
    statusText() {
      switch (this.status) {
        case 0:
          return '未提交'
        case 1:
          return '待审核'
        case 2:
          return '审核通过'
        case 3:
          return '审核失败'
        default:
          return ''
      }
    },
    showReviewButton() {
      return this.status === 0 || this.status === 3
    }
  },
  methods: {
    openReviewForm() {
      this.showForm = true
    },
    closeReviewForm() {
      this.showForm = false
    },
    submitReview() {
      // 提交审核逻辑
      console.log('提交审核', this.form)
      this.closeReviewForm()
      this.status = 1 // 设置为待审核状态
    }
  }
}
</script>

<style scoped>
.review-progress {
  padding: 20rpx;
}

.status-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 32rpx;
  font-weight: bold;
}

.review-button {
  padding: 10rpx 20rpx;
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 5rpx;
  cursor: pointer;
}

.form-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-content {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  width: 80%;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item text {
  display: block;
  margin-bottom: 10rpx;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
}

.form-actions {
  display: flex;
  justify-content: space-between;
}

.form-actions button {
  padding: 10rpx 20rpx;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  cursor: pointer;
}
</style> 